<template>
  <div class="home">
    <button @click="short" ref="btn">点击</button>
    <Header1 :userName="userName"></Header1>
    <main>
      <nav ref="nav">
        <ul >
          <li>
            <router-link to="/home/first">first</router-link>
          </li>
          <li>
            <router-link to="/home/second/?query=2">second</router-link>
          </li>
          <li>
            <router-link to="/home/third/3">third</router-link>
          </li>
          <li>
            <router-link to="/home/fourth/4/?query=4">fourth</router-link>
          </li>
        </ul>
      </nav>
      <div class="center">
        <router-view></router-view>
      </div>
    </main>
    <Footer1></Footer1>
  </div>
</template>
<script>
import Footer1 from "./Footer.vue";
import Header1 from "./Header.vue";
export default {
  name: "",
  components: {
    Footer1,
    Header1,
  },
  data() {
    return {
      userName: "",
      id: "",
      flag: false,
      re:360
    };
  },
  created() {
    
    this.userName = this.$route.params.userName;
    this.id = this.$route.params.id;
    console.log(this.$route.params);
    if (!this.userName || !this.id) {
      return this.$router
        .push({
          path: "/login",
        })
        .catch((err) => {});
    }
    this.$router
      .push({
        path: "/home/first",
      })
      .catch((err) => {});
  },
  computed: {},
  mounted() {
  },
  methods: {
    short() {
      this.flag = !this.flag;
      this.re+=360;
      if(this.flag){
        
        this.$refs.nav.style.width = "30px";
        this.$refs.nav.style.transform=`rotate(${this.re}deg)`;
        // this.$refs.nav.style.transform="";
      }else{
        this.$refs.nav.style.width = "150px";
         this.$refs.nav.style.transform=`rotate(${this.re}deg)`;
      }
    }
  },
};
</script>
<style lang='less'  scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  main {
    display: flex;
    justify-content: space-between;
    flex: 1;
    background-color: #ccc;
    animation: changeColor 1s infinite;
    overflow: hidden;

    nav {
      width: 80px;
      overflow: hidden;
      transition: all .5s;
      ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding-bottom: 50px;
        background: linear-gradient(
          to bottom,
          rgba(255, 64, 64, 0.8) 0%,
          rgba(255, 215, 0, 0.6) 50%,
          rgba(0, 255, 0, 0.4) 100%
        );
        li {
          flex: 1;
          a {
            display: block;
            width: 100%;
            height: 50%;
            text-decoration: none;
            line-height: 70px;
            color: purple;
            font-weight: bold;
          }
        }
      }
    }
  }
  .center {
    overflow: auto;
    flex: 1;
  }
  .router-link-exact-active {
    background: linear-gradient(
      135deg,
      red,
      orange,
      yellow,
      rgb(4, 252, 4),
      rgb(0, 183, 255),
      rgb(232, 7, 253),
      rgb(238, 6, 238)
    );
  }
}
@keyframes changeColor {
  0% {
    background-color: #cc00ff;
  }
  25% {
    background-color: #82db0d;
  }
  50% {
    background-color: #00d9ff;
  }
  75% {
    background-color: #f6fa0a;
  }
  100% {
    background-color: #ff0666;
  }
}
</style>
